import { QuestionFilled } from '@element-plus/icons-vue';
import { ElIcon, ElTooltip } from 'element-plus';

/**
 * 创建表格头部tootip的工厂函数
 * @param label 标题名称
 * @param content 鼠标hover的文本
 * @returns tsx
 */
const createLabelHeaderFactory = (label: string, content: string) => {
    return (
        <div class="table-header-tootip">
            <span>{label}</span>
            <ElTooltip
                effect="dark"
                content={content}
                raw-content
                placement="top"
                popperClass="table-header-tootip-popper">
                <ElIcon class="box-icon" color="#cccccc">
                    <QuestionFilled />
                </ElIcon>
            </ElTooltip>
        </div>
    );
};

/**
 * 创建表格头像展示的的工厂函数
 * @param key 字段的名字，会从里面获取avatar属性当作头像，name当作名称
 * @param shape 方形还是圆形，rect ｜ round
 * @returns renderFuncton
 */
const createRenderAvatarFactory = (key: string, shape: 'rect' | 'round' = 'round') => {
    return ({ row }: any) => {
        return (
            <div class={`${shape} work-info`}>
                <el-image
                    src={row[key]?.avatar || 'https://img-scrm-dev.keyid.cn/keyid-scrm-server/avatar/cust_default.png'}
                    fit="cover"
                    class="avatar">
                    {{
                        error: () => (
                            <div class="image-slot">
                                <el-icon>
                                    <icon-picture />
                                </el-icon>
                            </div>
                        )
                    }}
                </el-image>
                <el-tooltip effect="dark" content={row[key]?.name} placement="top-start">
                    <div class="name zw-text-ellipsis">{row[key]?.name}</div>
                </el-tooltip>
            </div>
        );
    };
};
/**
 * 员工信息的单独列配置
 */
export const workUserTableColumnOption = {
    staff_info: {
        prop: 'staff_info',
        label: '员工信息',
        showOverflowTooltip: false,
        minWidth: 200,
        render: createRenderAvatarFactory('staff_info')
    },
    // 群用户人数
    group_user_qty: {
        label: createLabelHeaderFactory(
            '群用户人数',
            '该员工作为群主/群成员的群中，截至统计周期最后一天群内所有群用户总数（不包含员工，用户去重）'
        ),
        minWidth: 160
    },
    group_user_repeat_qty: {
        label: createLabelHeaderFactory(
            '群用户人数（未去重）',
            '该员工作为群主/群成员的群中，截至统计周期最后一天群内所有群用户总数（不包含员工，用户不去重）'
        ),
        minWidth: 200
    },
    join_group_user_qty: {
        label: createLabelHeaderFactory(
            '入群人数',
            '该员工作为群主/群成员的群中，统计时间内新入群的人数（不包含员工，不同群用户不去重，同一个人反复进入同一个群只记录一次）'
        ),
        minWidth: 120
    },
    quit_group_user_qty: {
        label: createLabelHeaderFactory(
            '退群人数',
            '该员工作为群主/群成员的群中，统计时间内退群的人数（不包含员工，不同群用户不去重，同一个人反复退出同一个群只记录一次）'
        ),
        minWidth: 120
    },
    work_user_groupchat_num: {
        label: createLabelHeaderFactory(
            '用户群总数',
            '该员工作为群主/群成员的群中，截至统计周期最后一天所有在用的用户群总数'
        ),
        minWidth: 160
    },
    group_user_friend_qty: {
        label: createLabelHeaderFactory(
            '群内企微好友人数',
            '该员工作为群主/群成员的群中，截至统计周期最后一天，群内用户中已成为企业好友（添加了企业内任一员工的企业微信）的用户数（不包含员工，用户去重）'
        ),
        minWidth: 200
    },
    group_user_friend_proportion: {
        label: createLabelHeaderFactory(
            '企微好友占比',
            '该员工作为群主/群成员的群中，截至统计周期最后一天，企业好友数占群用户总数的比例'
        ),
        minWidth: 140
    },
    active_group_user_qty: {
        label: createLabelHeaderFactory(
            '群活跃人数',
            '该员工作为群主/群成员的群中，统计时间内在群内有发言的群成员人数（不包含员工，包含退群和解散群的数据，不同群用户不去重，同群用户去重，需群内有群成员开通会话存档功能才能统计）'
        ),
        minWidth: 160
    },
    user_activation: {
        label: createLabelHeaderFactory(
            '用户活跃度',
            '该员工作为群主/群成员的群中，统计时间内每天的群活跃人数/截止每天24点的群用户总数*100%（需群内有群成员开通会话存档功能才能统计，群活跃人数包含退群和解散群的数据，因此活跃度可能大于100%），多天数据按每天活跃率算平均值'
        ),
        minWidth: 160
    }
};

/**
 * 按群聊的单独列配置
 */
export const groupChatTableColumnOption = {
    work_groupchat: {
        prop: 'work_groupchat',
        label: '企微群',
        showOverflowTooltip: false,
        width: 200,
        render: createRenderAvatarFactory('work_groupchat', 'rect')
    },
    groupchat_main_user: {
        prop: 'groupchat_main_user',
        label: '群主',
        showOverflowTooltip: false,
        width: 200,
        render: createRenderAvatarFactory('groupchat_main_user')
    },
    groupchat_tag: {
        label: '群标签',
        isTag: true,
        width: 160
    },
    groupchat_created: {
        label: '建群时间',
        minWidth: 200
    },
    group_member_qty: {
        label: createLabelHeaderFactory('群总人数', '该群中，截至统计周期最后一天群内所有群用户和员工总数'),
        minWidth: 140
    },
    group_user_qty: {
        label: createLabelHeaderFactory('群用户人数', '该群中，截至统计周期最后一天群内所有群用户总数（不包含员工）'),
        minWidth: 160
    },
    group_staff_qty: {
        label: createLabelHeaderFactory('群员工人数', '该群中，截至统计周期最后一天群内所有员工总数'),
        minWidth: 160
    },
    join_group_user_qty: {
        label: createLabelHeaderFactory(
            '入群用户数',
            '该群中，统计时间内新入群的人数（不包含员工，同一个人反复进入同一个群只记录一次）'
        ),
        minWidth: 160
    },
    quit_group_user_qty: {
        label: createLabelHeaderFactory(
            '退群用户数',
            '该群中，统计时间内退群的用户数（不包含员工，同一个人反退出入同一个群只记录一次）'
        ),
        minWidth: 160
    },
    user_join_group_proportion: {
        label: createLabelHeaderFactory(
            '用户进群率',
            '该群中，统计时间内新入群人数占群成员总人数和退群人数之和的比例（不包含员工）'
        ),
        minWidth: 160
    },
    user_quit_group_proportion: {
        label: createLabelHeaderFactory(
            '用户退群率',
            '该群中，统计时间内退群人数占群成员总人数和退群人数之和的比例（不包含员工）'
        ),
        minWidth: 160
    },
    user_retain_group_proportion: {
        label: createLabelHeaderFactory('用户留存率', '1-用户退群率'),
        minWidth: 160
    },
    group_user_friend_qty: {
        label: createLabelHeaderFactory(
            '群内企微好友人数',
            '截至统计周期最后一天，该群内用户中已成为企业好友（添加了企业内任一员工的企业微信）的用户数（不包含员工）'
        ),
        minWidth: 200
    },
    group_user_friend_proportion: {
        label: createLabelHeaderFactory('企微好友占比', '截至统计周期最后一天，该群中企业好友数占群用户总数的比例'),
        minWidth: 180
    },
    active_group_user_qty: {
        label: createLabelHeaderFactory(
            '群活跃人数',
            '统计时间内在该群内有发言的群成员人数（不包含员工，包含退群和解散群的数据，需群内有群成员开通会话存档功能才能统计）'
        ),
        minWidth: 160
    },
    user_activation: {
        label: createLabelHeaderFactory(
            '用户活跃度',
            '统计时间内每天的群活跃人数/截止每天24点的群用户总数*100%（需群内有群成员开通会话存档功能才能统计，群活跃人数包含退群和解散群的数据，因此活跃度可能大于100%），多天数据按每天活跃率算平均值'
        ),
        minWidth: 160
    },
    group_message_qty: {
        label: createLabelHeaderFactory(
            '群消息总数',
            '该群中，统计时间内所有群成员发言消息总数（需群内有群成员开通会话存档功能才能统计，包含员工）'
        ),
        minWidth: 160
    },
    group_user_message_qty: {
        label: createLabelHeaderFactory(
            '用户消息数',
            '该群中，统计时间内所有群成员发言消息总数（需群内有群成员开通会话存档功能才能统计，不包含员工）'
        ),
        minWidth: 160
    },
    group_staff_message_qty: {
        label: createLabelHeaderFactory(
            '员工消息数',
            '该群中，统计时间内所有群员工发言消息总数（需群内有群成员开通会话存档功能才能统计）'
        ),
        minWidth: 160
    }
};

/**
 * 按日期的单独列配置
 */
export const dateTableColumnOption = {
    stat_date: {
        label: '日期',
        minWidth: 160
    },
    group_member_qty: {
        label: createLabelHeaderFactory('群总人数', '截至统计当日群内所有群用户和员工总数（员工和用户去重）'),
        minWidth: 160
    },
    group_user_qty: {
        label: createLabelHeaderFactory('群用户人数', '截至统计当日群内所有群用户总数（不包含员工，用户去重）'),
        minWidth: 160
    },
    group_staff_qty: {
        label: createLabelHeaderFactory('群员工人数', '截至统计当日群内所有员工总数（员工去重）'),
        minWidth: 160
    },
    join_group_user_qty: {
        label: createLabelHeaderFactory(
            '入群人数',
            '统计当日新入群的人数（不包含员工，用户不去重，同一个人反复进入同一个群只记录一次）'
        ),
        minWidth: 160
    },
    quit_group_user_qty: {
        label: createLabelHeaderFactory(
            '退群人数',
            '统计当日退群的用户数（不包含员工，用户不去重，同一个人反复退出同一个群只记录一次）'
        ),
        minWidth: 120
    },
    increas_user_qty: {
        label: createLabelHeaderFactory('净增人数', '入群用户数-退群用户数'),
        minWidth: 160
    },
    work_user_groupchat_num: {
        label: createLabelHeaderFactory('用户群总数', '截至统计当日所有在用的用户群总数'),
        minWidth: 120
    },
    add_groupchat_num: {
        label: createLabelHeaderFactory('新增用户群数', '统计当日新增的用户群数量'),
        minWidth: 160
    },
    dissolve_groupchat_num: {
        label: createLabelHeaderFactory('解散用户群数', '统计当日解散的用户群数量'),
        minWidth: 160
    },
    growth_groupchat_num: {
        label: createLabelHeaderFactory('净增用户群数', '新增用户群数-解散用户群数'),
        minWidth: 160
    },
    enter_group_proportion: {
        label: createLabelHeaderFactory(
            '用户进群率',
            '统计当日新入群人数占群成员总人数和退群人数之和的比例（不包含员工，用户不去重）'
        ),
        minWidth: 160
    },
    quit_group_proportion: {
        label: createLabelHeaderFactory(
            '用户退群率',
            '统计当日退群人数占群成员总人数和退群人数之和的比例（不包含员工，用户不去重）'
        ),
        minWidth: 160
    },
    retain_group_proportion: {
        label: createLabelHeaderFactory('用户留存率', '1-用户退群率'),
        minWidth: 160
    },
    group_user_friend_qty: {
        label: createLabelHeaderFactory(
            '群内企微好友人数',
            '截至统计当日群内用户中已成为企业好友（添加了企业内任一员工的企业微信）的用户数（不包含员工，用户去重）'
        ),
        minWidth: 160
    },
    work_user_proportion: {
        label: createLabelHeaderFactory('企微好友占比', '截至统计当日企业好友数占群用户总数的比例'),
        minWidth: 160
    },
    group_user_repeat_qty: {
        label: createLabelHeaderFactory(
            '群用户人数（未去重）',
            '截至统计当日群内所有群用户总数（不包含员工，用户不去重）'
        ),
        minWidth: 200
    },
    active_group_user_qty: {
        label: createLabelHeaderFactory(
            '群活跃人数',
            '统计当日在群内有发言的群成员人数（不包含员工，包含退群和解散群的数据，不同群用户不去重，同群用户去重，需群内有群成员开通会话存档功能才能统计）'
        ),
        minWidth: 160
    },
    user_activation: {
        label: createLabelHeaderFactory(
            '用户活跃度',
            '统计当日的群活跃人数/群用户总数*100%（需群内有群成员开通会话存档功能才能统计，群活跃人数包含退群和解散群的数据，因此活跃度可能大于100%）'
        ),
        minWidth: 160
    },
    group_message_qty: {
        label: createLabelHeaderFactory(
            '群消息总数',
            '统计当日所有群成员发言消息总数（需群内有群成员开通会话存档功能才能统计，包含员工）'
        ),
        minWidth: 160
    },
    group_user_message_qty: {
        label: createLabelHeaderFactory(
            '用户消息数',
            '统计当日所有群成员发言消息总数（需群内有群成员开通会话存档功能才能统计，不包含员工）'
        ),
        minWidth: 160
    },
    group_staff_message_qty: {
        label: createLabelHeaderFactory(
            '员工消息数',
            '统计当日所有群员工发言消息总数（需群内有群成员开通会话存档功能才能统计）'
        ),
        minWidth: 160
    }
};
